@import"https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;800;1000&display=swap";

.but03 {

  background: -webkit-linear-gradient(left, #22c83e, #82e112);

}

.butt {
  background: -webkit-linear-gradient(left, #22c83e, #82e112);
}

label:hover {
  color: #c9f73c;
}

a {
  color: #ffff;
}

.txt {
  color: #969696;
}

body {
  --banner-h: 62px;
  --menu-top-h: 38px;
  --header-h: 64px;
  --header-h-mobile: 52px;
  --animal_cheap_large_w: 160px;
  --animal_cheap_large_h: 260px;
}

* {
  --black-chinese: #151515;
  --dark-charkoal: #222;
  --dark-charkoal-1: #303030;
  --davis-grey: #595959;
  --cultured: #f5f5f4;
  --filippine-yellow: #ffd300;
  --menu-black: #1f1f1f;
  --secondary-text: #969696;
  --medium: #969696;
  --white-break: #b7b7b7;
  --red: #b40909;
  --green: #09b462;
  --box-shadow-select: 0px 0px 5px 0px #020202;
  --brand-casino: #e8ff28;
  --brand-sports: #28a3ff;
  --brand-ldb: var(--filippine-yellow);
  --bc: var(--brand-ldb);
  --text-docs-medium: #bbb
}

.doc-wrapper {
  grid-gap: 1em;
  display: grid;
  grid-template-columns: 250px calc(100vw - 250px - 3em);
  overflow: hidden;
  padding: 5em 1em;
  width: 100vw
}

.doc-wrapper .doc-menu {
  align-self: start;
  background: var(--dark-charkoal);
  border-radius: 6px;
  max-width: 920px;
  overflow: hidden;
  padding: 0 .5em;
  width: 100%
}

.doc-wrapper .doc-menu h2 {
  color: var(--bc);
  font-size: 1.6em;
  font-weight: 600;
  padding: .5em 0 0 1em
}

.doc-wrapper .doc-menu li {
  color: var(--cultured);
  padding-bottom: .5em
}

.doc-wrapper .doc-menu li:hover {
  color: var(--bc)
}

.doc-wrapper .doc-menu li:hover button {
  color: var(--bc);
  display: block
}

.doc-wrapper .doc-menu lispan {
  color: var(--cultured);
  font-size: 1.2em;
  padding: .5em 0 0 1em
}

.doc-wrapper .doc-menu li button {
  color: var(--cultured);
  display: block;
  padding-left: .25em;
  text-decoration: none;
  width: 200px
}

.doc-wrapper .doc-menu li a.selected {
  color: var(--bc)
}

.doc-wrapper .doc-content {
  padding: 1em;
  width: 100%
}

.doc-wrapper .doc-content h1 {
  color: var(--bc);
  font-size: 2.4em;
  font-weight: 800;
  margin-bottom: .5em
}

.doc-wrapper .doc-content h2 {
  font-size: 1.6em
}

.doc-wrapper .doc-content h2,
.doc-wrapper .doc-content h3 {
  color: var(--cultured);
  font-weight: 600;
  margin-bottom: .5em;
  margin-top: .5em
}

.doc-wrapper .doc-content h3 {
  font-size: 1.4em
}

.doc-wrapper .doc-content p {
  color: var(--text-docs-medium);
  font-size: 1.2em;
  margin: .5em 0 .25em !important
}

.doc-wrapper .doc-content p strong {
  color: var(--cultured)
}

.doc-wrapper .doc-content li {
  color: var(--text-docs-medium);
  font-size: 1.2em
}

.doc-wrapper .doc-content li b,
.doc-wrapper .doc-content li strong {
  color: var(--cultured)
}

.doc-wrapper .doc-content pre {
  background: var(--dark-charkoal);
  border-radius: 6px;
  color: var(--cultured);
  overflow: auto;
  padding: 1em
}

@media(max-width:950px) {
  .doc-wrapper {
    grid-template-columns: 250px calc(100vw - 250px - 3em)
  }
}

@media(max-width:800px) {
  .doc-wrapper {
    grid-template-columns: 100vw
  }

  .doc-wrapper .doc-menu {
    grid-row: 1;
    justify-self: center;
    width: 300px
  }

  .doc-wrapper .doc-content {
    grid-row: 2;
    width: calc(100vw - 2em)
  }

  .doc-wrapper .doc-content h1 {
    font-size: 2em
  }
}

@media(max-width:500px) {
  .doc-wrapper .doc-content h1 {
    font-size: 1.7em
  }
}

body {
  background: var(--black-chinese);
  padding-bottom: 3em
}

body .draws-all {
  --sc-w: 120px;
  --sc-gap: 1em;
  --centered-w: calc(var(--sc-w)*4 + var(--sc-gap)*3);
  --header-d-all-h: 64px;
  --bc: var(--brand-ldb);
  width: 100vw
}

body .draws-all .content {
  margin: var(--header-d-all-h) auto 0;
  padding: 1em 0 !important;
  width: var(--centered-w)
}

body .draws-all .content .titles-up {
  padding: 1em 0
}

body .draws-all .content .titles-up h1 {
  color: var(--bc);
  font-size: 1.8em;
  font-weight: 800;
  margin: 0
}

body .draws-all .content .titles-up p {
  color: #aaa;
  font-size: 1.2em;
  margin: .25em 0 !important
}

body .draws-all .content .titles-up p strong {
  color: var(--cultured)
}

body .draws-all .content .schedules {
  grid-gap: var(--sc-gap);
  display: grid;
  grid-template-columns: repeat(4, var(--sc-w));
  justify-content: center
}

body .draws-all .content .schedules .schedule {
  border: 2px solid var(--black-chinese);
  border-radius: 24px;
  cursor: pointer;
  overflow: hidden;
  width: var(--sc-w)
}

body .draws-all .content .schedules .schedule.selected {
  border: 2px solid var(--bc)
}

body .draws-all .content .schedules .schedule img {
  height: auto;
  width: 100%
}

body .draws-all .content .day-selector {
  align-items: center;
  background-color: var(--dark-charkoal);
  border-radius: 6px;
  display: grid;
  grid-template-columns: auto auto;
  padding: 1em
}

body .draws-all .content .day-selector .dates .week-day {
  color: var(--cultured);
  font-size: 2.2em;
  font-weight: 800;
  margin: 0
}

body .draws-all .content .day-selector .dates .date-long {
  color: var(--medium);
  font-size: 1.2em;
  margin: 0
}

body .draws-all .content .day-selector .selector {
  grid-gap: 0;
  align-items: center;
  background-color: var(--black-chinese);
  border-radius: 21px;
  display: grid;
  grid-template-columns: min-content 100px min-content;
  height: 42px;
  justify-content: center;
  justify-self: end;
  padding: 0 1em
}

body .draws-all .content .day-selector .selector img {
  cursor: pointer;
  width: 9px
}

body .draws-all .content .day-selector .selector .date-str {
  color: var(--cultured);
  justify-self: center;
  margin: 0;
  text-align: center
}

body .draws-all .content h2 {
  color: var(--bc);
  font-size: 1.4em;
  font-weight: 800;
  margin: 1em 0 .5em !important
}

body .draws-all .content h2.center {
  padding: 0 1em;
  text-align: center
}

body .draws-all .content .draw-table {
  --col-w: calc((var(--centered-w) - 2*18px)/3);
  grid-gap: 0;
  background-color: var(--dark-charkoal);
  border-radius: 6px;
  display: grid;
  grid-template-columns: 18px calc(var(--col-w)*3) 18px;
  overflow: hidden;
  padding: 1em 0;
  width: var(--centered-w)
}

body .draws-all .content .draw-table .arrow {
  align-self: start;
  cursor: pointer;
  justify-self: center;
  padding-top: 14px;
  width: 8px
}

body .draws-all .content .draw-table .draw-content {
  overflow: auto;
  width: 100%
}

body .draws-all .content .draw-table .draw-content table caption {
  color: var(--bc);
  font-size: 1.4em;
  font-weight: 800;
  height: 42px;
  text-align: left
}

body .draws-all .content .draw-table .draw-content table .denom {
  background-color: var(--black-chinese);
  border: 2px solid var(--medium);
  border-radius: 21px;
  height: 42px;
  min-width: calc(var(--col-w) - 2px)
}

body .draws-all .content .draw-table .draw-content table .denom p {
  color: var(--cultured);
  margin: 0
}

body .draws-all .content .draw-table .draw-content table .cell {
  min-height: 64px;
  min-width: calc(var(--col-w) - 2px)
}

body .draws-all .content .draw-table .draw-content table .cell .valu-img {
  background-color: var(--black-chinese);
  border-radius: 6px;
  display: grid;
  grid-template-columns: auto auto;
  height: 100%;
  padding: .25em;
  width: 100%
}

body .draws-all .content .draw-table .draw-content table .cell .valu-img img {
  height: 50px;
  justify-self: flex-start
}

body .draws-all .content .draw-table .draw-content table .cell .valu-img .group-value {
  display: grid;
  justify-self: end
}

body .draws-all .content .draw-table .draw-content table .cell .valu-img .group-value .group {
  align-self: start;
  color: var(--medium);
  justify-self: end;
  margin: 0
}

body .draws-all .content .draw-table .draw-content table .cell .valu-img .group-value .value {
  align-self: end;
  color: var(--cultured);
  margin: 0
}

body .draws-all .content section h2 {
  color: var(--bc);
  font-size: 1.4em;
  font-weight: 800;
  margin: 1em 0 .5em !important
}

body .draws-all .content section h3 {
  color: var(--cultured);
  font-size: 1.3em;
  font-weight: 600;
  margin: 0 0 .5em !important
}

body .draws-all .content section p {
  color: #aaa;
  font-size: 1.2em;
  margin: .25em 0 !important
}

body .draws-all .content section p strong {
  color: var(--cultured)
}

body .draws-all .content section li {
  color: #aaa;
  font-size: 1.2em
}

body .draws-all .content section li strong {
  color: var(--cultured)
}

@media screen and (max-width:575px) {
  body .draws-all {
    --sc-w: 90px;
    --sc-gap: 0.5em
  }

  body .draws-all .content {
    padding: .5em 0
  }
}

@media screen and (max-width:420px) {
  body .draws-all {
    --sc-w: 80px;
    --centered-w: calc(100vw - 2em)
  }

  body .draws-all .unsigned-header {
    grid-gap: .5em
  }

  body .draws-all .unsigned-header .logo img {
    height: 32px
  }

  body .draws-all .content .titles-up h1 {
    font-size: 1.6em
  }

  body .draws-all .content .day-selector .dates .week-day {
    font-size: 1.6em;
    font-weight: 600
  }

  body .draws-all .content .day-selector .dates .date-long {
    font-size: .9em
  }
}

@media screen and (max-width:370px) {
  body .draws-all {
    --sc-w: 70px
  }
}

.not-found {
  background-image: url(https://lotodobicho.com/gallery/landing/fondo-tecnologia-lineas-verdes.jpg);
  background-size: contain;
  display: grid;
  min-height: 100vh;
  place-content: center;
  width: 100vw
}

.not-found .content {
  background-color: rgba(0, 0, 0, .761);
  display: grid;
  justify-content: center;
  max-width: 600px;
  padding: 2em
}

.not-found .content h1 {
  color: var(--bc);
  font-size: 2em;
  font-weight: 900;
  margin: 0;
  text-align: center
}

.not-found .content p {
  color: var(--medium);
  font-size: 1.2em;
  font-weight: 400;
  margin: 0;
  text-align: center
}

.not-found .content .up {
  color: var(--cultured)
}

.not-found .content h2 {
  color: var(--bc);
  text-align: center
}

.not-found .content .btns {
  justify-self: center
}

.casino {
  --bc: #e8ff28;
  background-color: #000;
  overflow-x: hidden;
  width: 100vw
}

.casino .presentation-casino {
  background-color: #000;
  display: grid;
  grid-template-rows: 1fr 1fr;
  height: 100svh;
  width: 100vw
}

.casino .presentation-casino .up {
  background-image: url(https://lotodobicho.com/gallery/landing/background-lobby-casino-min.jpg);
  background-position: 50%;
  background-size: cover;
  display: grid;
  grid-template-rows: auto 62px;
  margin-top: 32px
}

.casino .presentation-casino .up .message {
  display: grid;
  place-content: center
}

.casino .presentation-casino .up .message .centered {
  background-color: rgba(0, 0, 0, .439);
  display: grid;
  padding: 1.5em;
  place-content: center
}

.casino .presentation-casino .up .message .centered .h1 {
  color: var(--cultured);
  font-size: 36px;
  font-weight: 1000;
  margin: 0;
  text-align: center;
  white-space: noWrap
}

.casino .presentation-casino .up .message .centered .h1.highlight {
  color: var(--bc)
}

.casino .presentation-casino .up .header-2 {
  grid-gap: 1.5em;
  align-items: center;
  display: grid;
  grid-template-columns: auto min-content min-content;
  height: 62px;
  padding: 1em
}

.casino .presentation-casino .up .header-2.fixed-up {
  background-color: rgba(0, 0, 0, .49);
  left: 0;
  padding-top: 0;
  position: fixed;
  right: 0;
  top: 32px
}

.casino .presentation-casino .up .header-2 .left .h2 {
  color: var(--cultured);
  font-weight: 1000;
  margin: 0
}

.casino .presentation-casino .up .header-2 .left .highlight {
  color: var(--bc)
}

.casino .presentation-casino .up .header-2 .enter {
  background-color: rgba(0, 0, 0, .569);
  border: 1px solid var(--bc);
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  height: 42px;
  padding: 0 1.5em;
  place-content: center
}

.casino .presentation-casino .up .header-2 .enter .label {
  color: var(--cultured)
}

.casino .presentation-casino .down-pres {
  display: grid;
  height: 100%;
  padding: 1em;
  place-content: center
}

.casino .presentation-casino .down-pres .block {
  display: grid;
  justify-content: center;
  padding: 2em
}

.casino .presentation-casino .down-pres .txt {
  border-radius: 6px;
  color: var(--bc);
  font-size: 24px;
  font-weight: 600;
  justify-self: center;
  max-width: 500px;
  text-align: center
}

.casino .presentation-casino .down-pres .spacing {
  color: var(--cultured);
  font-weight: 1000;
  letter-spacing: .35em
}

.casino .presentation-casino .down-pres a {
  justify-self: center
}

.casino .presentation-casino .down-pres a img {
  cursor: pointer;
  height: 42px
}

.casino .streaming {
  background-color: #000;
  width: 100vw
}

.casino .streaming video {
  width: 100%
}

.casino .game-category {
  align-content: flex-start;
  background-color: #161616;
  display: grid;
  grid-template-columns: 100vw;
  grid-template-rows: min-content auto;
  overflow: hidden;
  padding: 1em;
  width: 100vw
}

.casino .game-category.grid .games {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  justify-content: center;
  overflow: hidden
}

.casino .game-category.grid .games .game {
  grid-row: unset;
  justify-self: center
}

.casino .game-category .row-name {
  align-items: center;
  display: grid;
  grid-template-columns: auto 26px;
  width: calc(100vw - 2em)
}

.casino .game-category .row-name .cat-name {
  color: var(--bc);
  font-size: 32px;
  font-weight: 1000;
  justify-self: center;
  margin: 0;
  white-space: noWrap
}

.casino .game-category .row-name img {
  cursor: pointer;
  width: 26px
}

.casino .game-category .games {
  grid-gap: 1em;
  display: grid;
  overflow: auto;
  padding: 1em 0;
  width: calc(100vw - 2em)
}

.casino .game-category .games .game {
  border-radius: 26px;
  cursor: pointer;
  grid-row: 1;
  height: 168px;
  overflow: hidden;
  transition: all .2s;
  width: 250px
}

.casino .game-category .games .game:hover {
  transform: scale(1.04)
}

.casino .game-category .games .game:active {
  transform: scale(.96)
}

.casino .game-category .games .game img {
  height: 100%;
  width: 100%
}

.casino .why-register {
  grid-gap: 1em;
  align-content: flex-start;
  display: grid;
  grid-template-rows: min-content min-content min-content;
  padding: 1em;
  width: 100vw
}

.casino .why-register .label-title {
  color: var(--bc);
  font-size: 32px;
  font-weight: 800;
  justify-self: center;
  margin: 0
}

.casino .why-register .columns {
  grid-gap: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr
}

.casino .why-register .columns .col {
  grid-gap: 0;
  align-content: flex-start;
  display: grid;
  justify-content: center
}

.casino .why-register .columns .col .up-number {
  color: var(--cultured);
  font-size: 36px;
  font-weight: 1000;
  margin: 0;
  text-align: center
}

.casino .why-register .columns .col .down-txt {
  color: var(--bc);
  font-size: 24px;
  margin: 0;
  text-align: center
}

.casino .why-register .button {
  display: grid;
  justify-content: center
}

.casino .game-iframe {
  background: var(--black-chinese);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10000000
}

.casino .game-iframe.hide {
  display: none
}

.casino .game-iframe .close-game {
  position: absolute;
  right: 30px;
  top: 10px
}

.casino .game-iframe .close-game .circle {
  background-color: var(--dark-charkoal);
  border-radius: 16px;
  cursor: pointer;
  display: grid;
  height: 32px;
  place-content: center;
  width: 32px
}

.casino .game-iframe .close-game .circle img {
  width: 18px
}

.casino .game-iframe iframe {
  height: 100vh;
  width: 100vw
}

.casino .header-1 {
  align-items: center;
  background-color: rgba(0, 0, 0, .49);
  display: grid;
  height: 32px;
  justify-content: flex-start;
  left: 0;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0
}

.casino .header-1 .button {
  background-color: rgba(0, 0, 0, .329);
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  grid-row: 1;
  height: 32px;
  padding: 0 1em;
  place-content: center;
  transition: all .2s;
  white-space: noWrap
}

.casino .header-1 .button.selected .label {
  color: var(--bc);
  font-weight: 800
}

.casino .header-1 .button:hover {
  transform: scale(1.02)
}

.casino .header-1 .button:hover .label {
  color: var(--bc);
  font-weight: 800
}

.casino .header-1 .button:active {
  transform: scale(.96)
}

.casino .header-1 .button:active .label {
  color: var(--cultured);
  font-weight: 800
}

.casino .header-1 .button .label {
  color: var(--medium);
  font-size: .9em;
  transition: all .2s
}

#start {
  height: 64px
}

@media(max-width:600px) {
  .casino .presentation-casino {
    grid-template-rows: auto 450px
  }

  .casino .presentation-casino .up .message .centered .h1 {
    font-size: 24px
  }

  .casino .down-pres .txt {
    font-size: 20px !important;
    line-height: 1.1em
  }

  .casino .game-category .row-name .cat-name,
  .casino .why-register .columns .col .up-number,
  .casino .why-register .label-title {
    font-size: 24px
  }

  .casino .why-register .columns .col .down-txt {
    font-size: 16px
  }
}

@media(max-width:400px) {
  .casino .presentation-casino .up .header-2 {
    grid-gap: 1em
  }

  .casino .presentation-casino .up .header-2 .left .h2 {
    font-size: 18px
  }

  .casino .presentation-casino .up .header-2 .left .highlight {
    color: var(--bc)
  }

  .casino .presentation-casino .up .header-2 .enter {
    padding: 0 1em
  }

  .casino .why-register .label-title {
    font-size: 22px
  }

  .casino .why-register .columns .col .up-number {
    font-size: 20px
  }

  .casino .why-register .columns .col .down-txt {
    font-size: 14px
  }
}

.header-1 {
  align-items: center;
  background-color: rgba(0, 0, 0, .49);
  display: grid;
  height: 32px;
  justify-content: flex-start;
  left: 0;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0
}

.header-1 .button {
  background-color: rgba(0, 0, 0, .329);
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  grid-row: 1;
  height: 32px;
  padding: 0 1em;
  place-content: center;
  transition: all .2s;
  white-space: noWrap
}

.header-1 .button.selected .label {
  color: var(--bc);
  font-weight: 800
}

.header-1 .button:hover {
  transform: scale(1.02)
}

.header-1 .button:hover .label {
  color: var(--bc);
  font-weight: 800
}

.header-1 .button:active {
  transform: scale(.96)
}

.header-1 .button:active .label {
  color: var(--cultured);
  font-weight: 800
}

.header-1 .button .label {
  color: var(--medium);
  font-size: .9em;
  transition: all .2s
}

.presentation-ldb {
  display: grid;
  grid-template-rows: 1fr 1fr 64px;
  height: 100vh;
  width: 100vw
}

.presentation-ldb .up {
  background-image: url(https://lotodobicho.com/gallery/landing/black-panter.jpg);
  background-position: 50%;
  background-size: cover;
  display: grid;
  grid-template-rows: auto 62px;
  margin-top: 32px
}

.presentation-ldb .up .message {
  display: grid;
  place-content: center
}

.presentation-ldb .up .message .centered {
  background-color: rgba(0, 0, 0, .439);
  display: grid;
  padding: 1.5em;
  place-content: center
}

.presentation-ldb .up .message .centered .h1 {
  color: var(--cultured);
  font-size: 36px;
  font-weight: 1000;
  margin: 0;
  text-align: center;
  white-space: noWrap
}

.presentation-ldb .up .message .centered .h1.highlight {
  color: var(--bc)
}

.presentation-ldb .up .message .centered .spaced {
  color: var(--cultured);
  font-size: 26px;
  font-weight: 800;
  margin: 0;
  text-align: center
}

.presentation-ldb .up .header-2 {
  grid-gap: 1.5em;
  align-items: center;
  display: grid;
  grid-template-columns: auto min-content min-content;
  height: 62px;
  padding: 0 1em
}

.presentation-ldb .up .header-2 .logo-compuesto img {
  height: 26px
}

.presentation-ldb .up .header-2 .logo-short {
  display: none;
  height: 32px
}

.presentation-ldb .up .header-2 .logo-short img {
  height: 32px
}

.presentation-ldb .up .header-2.fixed-up {
  background-color: rgba(0, 0, 0, .49);
  left: 0;
  padding-top: 0;
  position: fixed;
  right: 0;
  top: 32px
}

.presentation-ldb .up .header-2 .left .h2 {
  color: var(--cultured);
  font-weight: 1000;
  margin: 0
}

.presentation-ldb .up .header-2 .left .highlight {
  color: var(--bc)
}

.presentation-ldb .up .header-2 .enter {
  background-color: rgba(0, 0, 0, .569);
  border: 1px solid var(--bc);
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  height: 42px;
  padding: 0 1.5em;
  place-content: center
}

.presentation-ldb .up .header-2 .enter .label {
  color: var(--cultured)
}

.presentation-ldb .down-pres {
  display: grid;
  height: 100%;
  padding: 1em;
  place-content: center
}

.presentation-ldb .down-pres .block {
  display: grid;
  justify-content: center;
  padding: 2em
}

.presentation-ldb .down-pres .txt {
  border-radius: 6px;
  color: var(--bc);
  font-size: 24px;
  font-weight: 600;
  justify-self: center;
  max-width: 500px;
  text-align: center
}

.presentation-ldb .down-pres .bold {
  color: var(--cultured);
  font-weight: 1000;
  letter-spacing: .35em
}

.presentation-ldb .down-pres a {
  justify-self: center
}

.presentation-ldb .down-pres a img {
  cursor: pointer;
  height: 42px
}

.presentation-ldb .bottom {
  align-content: center;
  background-color: var(--band-color);
  display: grid;
  height: 64px;
  justify-content: center;
  width: 100vw
}

.presentation-ldb .bottom .txt {
  align-self: center;
  color: var(--cultured);
  margin: 0
}

.presentation-ldb .bottom .spacing {
  color: var(--bc);
  font-weight: 1000;
  letter-spacing: .35em;
  margin: 0
}

@media(max-width:600px) {
  .presentation-ldb {
    grid-template-rows: auto 300px 64px;
    height: 100svh
  }

  .presentation-ldb .up .message .centered {
    max-width: 320px;
    padding: 1em
  }

  .presentation-ldb .up .message .centered .h1 {
    font-size: 24px
  }

  .presentation-ldb .up .message .centered .spaced {
    font-size: 18px
  }

  .presentation-ldb .down-pres .txt {
    font-size: 18px;
    line-height: 1.2em
  }
}

@media(max-width:450px) {
  .presentation-ldb {
    grid-template-rows: auto 300px 64px
  }

  .presentation-ldb .up .message .centered {
    padding-top: 2em
  }

  .presentation-ldb .up .header-2 .logo-compuesto img {
    height: 20px !important
  }
}

@media(max-width:400px) {
  .presentation-ldb .up .header-2 {
    grid-gap: 1em
  }

  .presentation-ldb .up .header-2 .logo-compuesto {
    display: none
  }

  .presentation-ldb .up .header-2 .logo-short {
    display: block
  }

  .presentation-ldb .up .header-2 .left .h2 {
    font-size: 18px
  }

  .presentation-ldb .up .header-2 .left .highlight {
    color: var(--bc)
  }

  .presentation-ldb .up .header-2 .enter {
    padding: 0 1em
  }

  .presentation-ldb .down-pres .txt {
    font-size: 18px;
    line-height: 1.2em
  }
}

@media(max-width:350px) {

  .landing-new .presentation-ldb .up .header-2 .logo-short,
  .landing-new .presentation-ldb .up .header-2 .logo-short img {
    height: 24px
  }
}

.apps {
  display: grid;
  grid-template-rows: 1fr 1fr;
  height: 100vh
}

.apps .layout {
  background-position: 50%;
  background-size: cover;
  display: grid;
  grid-template-rows: auto 64px
}

.apps .layout.casino-area {
  --bc: var(--brand-casino);
  background-image: url(https://lotodobicho.com/gallery/landing/background-lobby-casino-min.jpg)
}

.apps .layout.sports-area {
  --bc: var(--brand-sports);
  background-image: url(https://lotodobicho.com/gallery/landing/sports-basket-guy.jpg)
}

.apps .layout .message,
.apps .layout .message .centered {
  display: grid;
  place-content: center
}

.apps .layout .message .centered {
  background-color: rgba(0, 0, 0, .439);
  padding: 1.5em
}

.apps .layout .message .centered .h1 {
  color: var(--cultured);
  font-size: 36px;
  font-weight: 1000;
  margin: 0;
  text-align: center;
  white-space: noWrap
}

.apps .layout .message .centered .h1.highlight {
  color: var(--bc)
}

.apps .layout .message .centered .h2 {
  color: var(--cultured);
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  text-align: center
}

.apps .layout .bottom {
  align-items: center;
  background-color: var(--band-color);
  display: grid;
  grid-template-columns: auto min-content;
  padding: 0 1em
}

.apps .layout .bottom .left .h2 {
  color: var(--cultured);
  font-weight: 1000;
  margin: 0
}

.apps .layout .bottom .left .highlight {
  color: var(--bc)
}

.apps .layout .bottom .moore-info {
  grid-gap: 1em;
  align-items: center;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 42px
}

.apps .layout .bottom .moore-info .txt {
  color: var(--cultured);
  white-space: noWrap
}

.apps .layout .bottom .moore-info img {
  height: 42px
}

@media(max-width:600px) {
  .apps {
    height: 100svh
  }

  .apps .layout .message .centered .h1 {
    font-size: 30px
  }

  .apps .layout .message .centered .h2 {
    font-size: 22px
  }
}

@media(max-width:450px) {
  .apps .layout .message .centered .h1 {
    font-size: 26px !important
  }

  .apps .layout .message .centered .h2 {
    font-size: 20px !important
  }
}

.betstype-section {
  background: #000;
  padding: 24px
}

.betstype-section .banner-options {
  display: grid;
  justify-content: center
}

.betstype-section .banner-options picture,
.betstype-section .banner-options picture img {
  height: 150px
}

.betstype-section .betstype {
  grid-gap: 12px;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
  justify-content: center;
  padding: 24px
}

.betstype-section .betstype .box {
  grid-gap: 12px;
  background: var(--dark-charkoal);
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 38px auto 32px;
  padding: 24px 12px;
  width: 100%
}

.betstype-section .betstype .box:hover .lbl {
  color: var(--bc)
}

.betstype-section .betstype .box .denom {
  align-content: center;
  background-color: #000;
  border-radius: 50%;
  display: inline-flex;
  display: grid;
  height: 40px;
  justify-content: center;
  width: 40px
}

.betstype-section .betstype .box .denom,
.betstype-section .betstype .box .lbl {
  align-self: center;
  color: var(--cultured);
  font-weight: 700;
  margin: 0
}

.betstype-section .betstype .box picture {
  align-self: center;
  width: 16px
}

.betstype-section .betstype .box picture img {
  width: 16px
}

.betstype-section .selected-bt {
  align-content: center;
  background: rgba(0, 0, 0, .961);
  bottom: 0;
  display: none;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0
}

.betstype-section .selected-bt.show {
  display: grid
}

.betstype-section .selected-bt picture {
  display: none;
  width: 370px
}

.betstype-section .selected-bt picture.show {
  display: block
}

.betstype-section .selected-bt picture img {
  width: 370px
}

.betstype-section .selected-bt .info {
  background: #000;
  border-radius: 5px;
  color: var(--medium);
  display: none;
  padding: 12px;
  width: 370px
}

.betstype-section .selected-bt .info.show {
  display: block
}

@media(max-width:750px) {
  .betstype-section {
    padding: 24px
  }

  .betstype-section .banner-options {
    padding: 48px
  }

  .betstype-section .banner-options .banner-bets-options {
    height: 150px
  }

  .betstype-section .betstype {
    grid-gap: 12px;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    padding: 18px
  }

  .betstype-section .betstype .box {
    grid-row: auto;
    padding: 12px
  }
}

@media(max-width:550px) {
  .betstype-section .betstype {
    padding: 18px 0
  }

  .betstype-section .selected-bt .info,
  .betstype-section .selected-bt picture,
  .betstype-section .selected-bt picture img {
    width: 300px
  }
}

.how-play {
  --frame-hp-width: 500px;
  background-color: var(--bc);
  display: grid;
  height: -moz-min-content;
  height: min-content;
  justify-content: center
}

.how-play .centered .frames {
  overflow-x: hidden;
  padding-bottom: 2em;
  width: var(--frame-hp-width)
}

.how-play .centered .frames .circle {
  background: #000;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  height: 32px;
  place-content: center;
  width: 32px
}

.how-play .centered .frames .circle.back picture {
  transform: rotate(180deg) translateX(-8px);
  transform-origin: center center
}

.how-play .centered .frames .circle picture,
.how-play .centered .frames .circle picture img {
  height: 24px
}

.how-play .centered .frames .row {
  grid-gap: 1em;
  align-items: center;
  border-bottom: 3px solid #000;
  display: grid;
  grid-template-columns: 24px auto 32px;
  height: -moz-min-content;
  height: min-content
}

.how-play .centered .frames .row .index {
  font-size: 1.5em;
  font-weight: bolder;
  line-height: 1.15em
}

.how-play .centered .frames .row .menu-title {
  font-size: 1.3em;
  font-weight: bolder;
  line-height: 1.15em;
  margin: 0
}

.how-play .centered .frames .container {
  display: grid;
  grid-template-columns: var(--frame-hp-width) var(--frame-hp-width);
  transform: translateX(0);
  transition: all .5s ease-in-out;
  width: calc(var(--frame-hp-width)*2)
}

.how-play .centered .frames .container.showRight {
  transform: translateX(calc(var(--frame-hp-width)*-1))
}

.how-play .centered .frames .container .menu-frame {
  align-content: start;
  display: grid;
  padding-top: 0;
  width: var(--frame-hp-width)
}

.how-play .centered .frames .container .explanations-frame {
  padding-left: 1em;
  width: var(--frame-hp-width)
}

.how-play .centered .frames .container .explanations-frame .back {
  grid-gap: 1em;
  align-items: center;
  display: grid;
  grid-template-columns: min-content auto
}

.how-play .centered .frames .container .explanations-frame .back .text {
  font-size: 1.1em
}

.how-play .centered .frames .container .explanations-frame .explanation-wrapper.hide {
  display: none
}

.how-play .centered .frames .container .explanations-frame .explanation-wrapper .explanation p {
  font-size: 1.1em;
  text-align: start
}

.how-play .centered .frames .container .explanations-frame .explanation-wrapper .image {
  display: grid;
  place-content: center
}

.how-play .centered .frames .container .explanations-frame .explanation-wrapper .image picture,
.how-play .centered .frames .container .explanations-frame .explanation-wrapper .image picture img {
  max-width: calc(var(--frame-hp-width)*.5)
}

@media(max-width:550px) {
  .how-play {
    --frame-hp-width: 100vw
  }

  .how-play .centered .frames {
    padding-bottom: 2em
  }

  .how-play .centered .frames .container .menu-frame {
    padding: 0 1.5em 1.5em
  }

  .how-play .centered .frames .container .menu-frame .row {
    grid-gap: 1em
  }

  .how-play .centered .frames .container .menu-frame .row .menu-title {
    font-size: 1.1em;
    line-height: 1.15em
  }

  .how-play .centered .frames .container .explanations-frame {
    padding: 1.5em
  }

  .how-play .centered .frames .container .explanations-frame .explanation-wrapper .image {
    display: grid;
    place-content: center
  }

  .how-play .centered .frames .container .explanations-frame .explanation-wrapper .image picture,
  .how-play .centered .frames .container .explanations-frame .explanation-wrapper .image picture img {
    max-width: calc(var(--frame-hp-width)*.9)
  }
}

.quotes-wrapper {
  background-color: var(--bc);
  display: grid;
  justify-content: center
}

.quotes-wrapper .centered .quotes {
  display: grid;
  padding: 1em;
  width: var(--frame-hp-width)
}

.quotes-wrapper .centered .quotes .row {
  grid-gap: .5em;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr
}

.quotes-wrapper .centered .quotes .row .box {
  border: 1px solid #000;
  display: grid;
  grid-template-rows: auto min-content
}

.quotes-wrapper .centered .quotes .row .box .desc {
  background-color: #000;
  display: grid;
  padding: 0 .5em;
  place-content: center
}

.quotes-wrapper .centered .quotes .row .box .desc p {
  color: #fff;
  text-align: center
}

.quotes-wrapper .centered .quotes .row .box .value {
  text-align: center
}

@media(max-width:550px) {
  .quotes-wrapper {
    width: 100vw
  }

  .quotes-wrapper .centered {
    padding: 0;
    width: 100vw
  }

  .quotes-wrapper .centered .quotes {
    padding: .5em;
    width: 100vw
  }

  .quotes-wrapper .centered .quotes .row {
    grid-gap: .5em;
    width: 100%
  }
}

.ponto-do-bicho {
  background-color: var(--black-chinese);
  width: 100%
}

.ponto-do-bicho .centered {
  display: grid;
  justify-content: center;
  margin: 0 auto;
  width: 940px
}

.ponto-do-bicho .centered h2 {
  color: var(--bc);
  font-size: 32px;
  font-weight: 800;
  margin: 0;
  text-align: center
}

.ponto-do-bicho .centered p {
  color: var(--medium);
  text-align: center;
  width: 400px
}

@media(max-width:940px) {
  .ponto-do-bicho .centered {
    width: 640px
  }
}

@media(max-width:640px) {
  .ponto-do-bicho .centered {
    width: 480px
  }
}

@media(max-width:500px) {
  .ponto-do-bicho .centered {
    padding: 1em;
    width: 100%
  }

  .ponto-do-bicho .centered p {
    width: 100%
  }
}

.landing-new {
  background: linear-gradient(rgba(10, 198, 53, 1) 0%, rgba(15, 57, 15, 1) 100%);
  overflow-x: hidden;
  width: 100vw
}

.landing-new #start {
  height: 64px
}

@media(max-width:550px) {
  .landing-new .landing-new .centered {
    --frame-hp-width: var(100vw);
    padding: 0
  }

  .landing-new .landing-new .centered .titles {
    padding: 1em
  }

  .landing-new .landing-new .centered .titles .title {
    font-size: 1.8em;
    line-height: 1.15em
  }

  .landing-new .landing-new .centered .titles .explanation {
    font-size: 1em
  }
}

.lbsports {
  --header-h: 64px;
  --padding: 1em;
  --gap: 1em;
  --background-header: var(--black-chinese);
  --blue-sports: #0458fe;
  background: url(https://lotodobicho.com/gallery/landing/sportbet-ver-min.jpg);
  background-color: var(--black-chinese);
  background-repeat: no-repeat;
  background-size: cover
}

.lbsports.fixed .header-lbsports .pin svg {
  display: none !important
}

.lbsports.fixed .header-lbsports .pin .circle {
  display: block !important
}

.lbsports.fixed .presentation-lbsports {
  opacity: 0
}

.lbsports.fixed .betby {
  bottom: 0;
  overflow: auto;
  position: fixed;
  top: calc(var(--header-h) + var(--menu-top-h))
}

.lbsports.fixed .payments-section,
.lbsports.fixed footer {
  opacity: 0
}

.lbsports .header-lbsports {
  grid-gap: 1em;
  align-items: center;
  background-color: var(--background-header);
  display: grid;
  grid-template-columns: min-content auto auto 42px;
  height: var(--header-h);
  left: 0;
  padding: 0 1em;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateY(0);
  transition: all .5s;
  z-index: 100000
}

.lbsports .header-lbsports.hide {
  transform: translateY(-92px)
}

.lbsports .header-lbsports .logo {
  cursor: pointer;
  height: 52px
}

.lbsports .header-lbsports .buttons {
  grid-gap: 1em;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: end
}

.lbsports .header-lbsports .buttons .button {
  border: 2px solid var(--blue-sports);
  border-radius: 21px;
  cursor: pointer;
  display: grid;
  height: 42px;
  padding: 0 1em;
  place-content: center;
  transition: all .2s
}

.lbsports .header-lbsports .buttons .button.register {
  background-color: var(--blue-sports)
}

.lbsports .header-lbsports .buttons .button.enter {
  background-color: #01a0a5;
  border: none
}

.lbsports .header-lbsports .buttons .button.enter .label {
  color: var(--blue-sports)
}

.lbsports .header-lbsports .buttons .button:hover {
  transform: scale(1.02)
}

.lbsports .header-lbsports .buttons .button:active {
  transform: scale(.98)
}

.lbsports .header-lbsports .buttons .button .label {
  color: var(--cultured);
  font-weight: 600;
  line-height: 1em;
  margin: 0;
  text-align: center
}

.lbsports .header-lbsports .pin {
  background-color: #01a0a5;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  height: 42px;
  place-content: center;
  width: 42px
}

.lbsports .header-lbsports .pin svg {
  display: block;
  width: 21px
}

.lbsports .header-lbsports .pin svg path {
  fill: var(--black-chinese)
}

.lbsports .header-lbsports .circle {
  background-color: var(--black-chinese);
  border-radius: 50%;
  display: none;
  height: 18px;
  width: 18px
}

.lbsports .presentation-lbsports {
  height: 100vh;
  opacity: 1;
  padding: 3em auto;
  position: relative;
  top: -1em;
  transition: all .2s ease
}

.lbsports .presentation-lbsports,
.lbsports .presentation-lbsports .image {
  display: grid;
  place-content: center;
  width: 100%
}

.lbsports .presentation-lbsports .image img {
  height: 500px;
  margin-top: 3em
}

.lbsports .presentation-lbsports .txts {
  background: rgba(1, 113, 149, .769);
  border-radius: 6px;
  justify-self: center;
  max-width: 400px;
  padding: 1em;
  position: relative;
  top: -3em
}

.lbsports .presentation-lbsports .txts .title {
  color: var(--cultured);
  font-size: 2em;
  font-weight: 1000;
  line-height: 1.1em;
  margin: 0 0 .65em;
  text-align: center
}

.lbsports .presentation-lbsports .txts .msg {
  color: var(--cultured);
  font-weight: 300;
  line-height: 1.2em;
  margin: 0;
  text-align: center
}

.lbsports .presentation-lbsports .arrow {
  display: grid;
  place-content: center;
  position: relative;
  top: -2em
}

.lbsports .presentation-lbsports .arrow .circle {
  background-color: #2c899c;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  height: 52px;
  place-content: center;
  width: 52px
}

.lbsports .presentation-lbsports .arrow .circle img {
  height: 36px
}

.lbsports .betby {
  background-color: #000;
  height: auto;
  width: 100%
}

@media(max-width:675px) {
  .lbsports .presentation-lbsports {
    top: -3em
  }

  .lbsports .presentation-lbsports .image img {
    height: 350px
  }

  .lbsports .presentation-lbsports .txts {
    top: -2.5em
  }

  .lbsports .betby.fixed {
    top: 64px
  }

  .lbsports .betby .bettech {
    position: relative;
    top: -64px
  }
}

@media(max-width:450px) {
  .lbsports .header-lbsports {
    grid-gap: .5em;
    padding: 0 .65em
  }

  .lbsports .header-lbsports .logo {
    height: 32px
  }
}

@media(max-width:390px) {
  .ldb-casino .presentation-ldb-casino .card .txt {
    align-self: flex-end;
    font-size: 24px;
    padding-bottom: 1em;
    padding-right: 5em
  }
}

@media(max-width:360px) {
  .ldb-casino .presentation-ldb-casino .card .txt {
    align-self: flex-end;
    font-size: 22px;
    padding-bottom: 1.5em;
    padding-right: 5em
  }

  .ldb-casino .presentation-ldb-casino .card .enter .label {
    font-size: 1em
  }
}

footer,
footer .logos {
  background-color: var(--black-chinese);
  width: 100%
}

footer .logos {
  grid-gap: 2em;
  align-content: center;
  display: grid;
  justify-content: center;
  padding: 2em
}

footer .logos .wrapper {
  align-self: center;
  grid-row: 1
}

footer .logos .wrapper picture,
footer .logos .wrapper picture img,
footer .logos .wrapper.itech picture,
footer .logos .wrapper.itech picture img {
  height: 128px
}

footer .logos .wrapper.curacao,
footer .logos .wrapper.xcm {
  width: 128px
}

footer .links {
  grid-gap: 1em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 250px));
  justify-content: center;
  padding: 24px;
  width: 100%
}

footer .links .box .title {
  color: var(--cultured);
  display: block;
  font-size: 1.4em;
  height: 35px;
  line-height: 20px;
  text-decoration: none
}

footer .links .box .list {
  display: grid;
  justify-self: center
}

footer .links .box .list a {
  color: var(--medium);
  line-height: 24px
}

footer .links .box .list a:hover {
  color: var(--cultured)
}

footer .links .box .list a:active {
  color: var(--bc)
}

footer .links .box .list a.selected {
  color: var(--cultured)
}

footer .langs {
  display: grid;
  place-content: center;
  width: 100vw
}

footer .langs .band {
  grid-gap: 1em;
  align-content: center;
  background-color: var(--dark-charkoal);
  border-radius: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 80px));
  height: 60px;
  justify-content: center;
  margin: 0 auto;
  padding: 0 2em
}

footer .langs .band a {
  color: var(--medium);
  grid-row: 1;
  line-height: 24px;
  text-align: center;
  width: 80px
}

footer .langs .band a:hover {
  color: var(--bc)
}

footer .langs .band a:active {
  color: var(--cultured)
}

footer .langs .band a.selected {
  color: var(--bc);
  font-weight: 800
}

footer .company {
  color: var(--medium);
  font-weight: 400;
  padding: 1em;
  text-align: center
}

footer .company .higlight {
  color: var(--cultured)
}

footer .copyright {
  align-content: center;
  display: grid;
  justify-content: center;
  padding: 1em
}

footer .copyright .txt {
  color: var(--medium);
  font-size: 1.1em;
  font-weight: 400;
  text-align: center
}

footer .copyright .txt .higlight {
  color: var(--bc)
}

@media(max-width:550px) {
  footer .logos {
    grid-gap: 1em;
    padding: 1em
  }

  footer .logos .wrapper picture,
  footer .logos .wrapper picture img,
  footer .logos .wrapper.itech picture,
  footer .logos .wrapper.itech picture img {
    height: 72px
  }

  footer .logos .wrapper.curacao,
  footer .logos .wrapper.xcm {
    width: 72px
  }

  footer .links {
    grid-template-columns: repeat(auto-fit, minmax(180px, 180px));
    padding: 1em
  }

  footer .links .box .title {
    height: 55px
  }

  footer .copyright {
    padding-bottom: 24px
  }
}

.apk {
  display: grid;
  justify-content: center;
  padding: 1em
}

.apk img {
  border: 1px solid #fff;
  border-radius: 1.5em;
  height: 72px
}

.link {
  display: grid;
  justify-content: center
}

.link .instructions {
  align-self: center;
  color: #fff;
  text-align: center;
  text-decoration: underline
}

.app-section-apk {
  background-color: var(--bc)
}

.app-section-apk,
.app-section-apk .centered .image {
  display: grid;
  justify-content: center
}

.app-section-apk .centered .image picture img {
  width: 300px
}

@media(max-width:550px) {
  .app-section-apk {
    width: 100vw
  }

  .app-section-apk .centered {
    padding: 0;
    width: 100vw
  }
}

.animals-wrapper {
  width: 100vw
}

.animals-wrapper .centered {
  grid-gap: 1em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--animal_cheap_large_w), var(--animal_cheap_large_w)));
  justify-content: center
}

@keyframes fade-in {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.animal-cheap {
  background: var(--dark-charkoal);
  border-radius: 20px;
  width: var(--animal_cheap_large_w)
}

.animal-cheap.large {
  height: var(--animal_cheap_large_h)
}

.animal-cheap .large-layout {
  grid-gap: 8px;
  align-content: center;
  display: grid;
  grid-template-rows: 130px 40px 35px 35px;
  height: 100%;
  justify-content: center;
  width: 100%
}

.animal-cheap .large-layout.added {
  animation: fade-in 1.5s
}

.animal-cheap .large-layout .circle-image {
  bottom: -20px;
  display: grid;
  justify-content: center;
  position: relative
}

.animal-cheap .large-layout .circle-image .circle {
  background: hsla(0, 0%, 100%, .35);
  border-radius: 50%;
  height: 110px;
  overflow: hidden;
  width: 110px
}

.animal-cheap .large-layout .circle-image .image {
  align-content: center;
  display: grid;
  justify-content: center;
  margin-top: -120px;
  position: relative
}

.animal-cheap .large-layout .circle-image .image img {
  width: 140px
}

.animal-cheap .large-layout .name {
  align-self: end;
  font-weight: 700;
  margin: 0;
  text-align: center
}

.animal-cheap .large-layout .group {
  align-self: center;
  margin: 0;
  text-align: center
}

.numbers {
  grid-gap: 4px
}

.numbers,
.numbers .number {
  display: grid;
  justify-content: center
}

.numbers .number {
  align-content: center;
  background: hsla(0, 0%, 40%, .239);
  border-radius: 8px;
  grid-row: 1;
  height: 32px;
  width: 32px
}

.numbers .number .txt {
  align-self: center;
  color: var(--cultured);
  margin: 0
}

.menu-top {
  grid-gap: 1em;
  background: var(--background-header);
  display: grid;
  height: var(--menu-top-h);
  justify-content: flex-start;
  left: 0;
  overflow: auto;
  padding: .35em 1em;
  position: fixed;
  right: 0;
  top: var(--header-h);
  z-index: 1000
}

.menu-top a {
  border-radius: 6px;
  color: var(--medium);
  cursor: pointer;
  font-size: .9em;
  grid-row: 1;
  padding: .25em .5em;
  transition: all .2s;
  white-space: nowrap
}

.menu-top a.selected {
  background-color: var(--dark-charkoal-1);
  color: var(--bc)
}

.menu-top a.unselected {
  background-color: #1d1d1d
}

.menu-top a.unselected:hover {
  transform: scale(1.03)
}

.menu-top a.unselected:active {
  transform: scale(.97)
}

.payments-section {
  background: var(--black-chinese);
  display: grid;
  justify-content: center;
  padding: 1em;
  width: 100vw
}

.payments-section .centered .titles .title {
  color: #fff
}

.payments-section .centered .titles .explanation {
  color: gray
}

.payments-section .centered .image-pix {
  display: grid;
  width: 100%
}

.payments-section .centered .image-pix picture {
  height: 120px;
  justify-self: center
}

.payments-section .centered .image-pix picture img {
  height: 120px
}

.payments-section .centered .payments {
  grid-gap: 12px;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: repeat(auto-fit, minmax(70px, 120px));
  justify-content: center;
  padding: 2em 0;
  width: 100%
}

.payments-section .centered .payments .wrapper {
  align-content: center;
  background-color: #fff;
  border-radius: .5em;
  display: grid;
  justify-content: center
}

.payments-section .centered .payments .wrapper picture {
  align-self: center;
  height: 52px
}

.payments-section .centered .payments .wrapper picture img {
  height: 52px
}

@media(max-width:550px) {
  .payments-section {
    background: #000;
    display: grid;
    justify-content: center;
    padding: 1em;
    width: 100vw
  }

  .payments-section .centered {
    width: 100vw
  }

  .payments-section .centered .image-pix {
    display: grid;
    width: 100%
  }

  .payments-section .centered .image-pix img {
    height: 120px;
    justify-self: center
  }
}

.why-register {
  grid-gap: 1em;
  align-content: flex-start;
  display: grid;
  grid-template-rows: min-content min-content min-content;
  padding: 1em;
  width: 100vw
}

.why-register .label-title {
  color: var(--bc);
  font-size: 32px;
  font-weight: 800;
  justify-self: center;
  margin: 0
}

.why-register .columns {
  grid-gap: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr
}

.why-register .columns .col {
  grid-gap: 0;
  align-content: flex-start;
  display: grid;
  justify-content: center
}

.why-register .columns .col .up-number {
  color: var(--cultured);
  font-size: 36px;
  font-weight: 1000;
  margin: 0;
  text-align: center
}

.why-register .columns .col .down-txt {
  color: var(--bc);
  font-size: 24px;
  margin: 0;
  text-align: center
}

.why-register .button {
  display: grid;
  justify-content: center
}

@media(max-width:600px) {

  .why-register .columns .col .up-number,
  .why-register .label-title {
    font-size: 24px
  }

  .why-register .columns .col .down-txt {
    font-size: 16px
  }
}

@media(max-width:400px) {
  .why-register .label-title {
    font-size: 22px
  }

  .why-register .columns .col .up-number {
    font-size: 20px
  }

  .why-register .columns .col .down-txt {
    font-size: 14px
  }
}

.unsigned-header {
  grid-gap: 1em;
  align-items: center;
  background-color: hsla(0, 0%, 8%, .588);
  display: grid;
  grid-template-columns: auto min-content min-content;
  height: var(--header-d-all-h);
  left: 0;
  padding: 1em;
  position: fixed;
  right: 0;
  top: 0
}

.unsigned-header .logo img {
  height: 42px
}

.promo-bonus {
  display: grid;
  place-content: center
}

.promo-bonus .bonus {
  color: var(--cultured);
  font-size: 1.5rem;
  font-weight: 900;
  justify-self: center;
  max-width: 300px;
  text-align: center
}

.promo-bonus .warn {
  color: var(--medium);
  font-size: .85em;
  justify-self: center;
  text-align: center
}

@media screen and (max-width:450px) {
  .promo-bonus .bonus {
    font-size: 1.3rem;
    margin: 0
  }
}

.register-btn {
  background-color: var(--bc);
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  height: 42px;
  padding: 0 1.5em;
  place-content: center
}

.register-btn .label {
  color: #000;
  font-weight: 800;
  white-space: noWrap
}

.enter-btn {
  border-radius: 6px;
  display: grid;
  height: 42px;
  padding: 0 1em;
  place-content: center;
  background-color: transparent;
  color: #fff;
  font-weight: bold;
  border: 1px solid #82e112;;
}

.enter-btn-modal {
  border-radius: 6px;
  display: grid;
  height: 42px;
  padding: 0 1em;
  place-content: center;
  color: #000;
  font-weight: bold;
  border: 1px solid #82e112;;
}

.enter-btn .label {
  color: var(--cultured)
}

.centered {
  justify-self: center;
  max-width: 100vw;
  width: 600px
}

.centered,
.centered .titles {
  padding: 1em
}

.centered .titles .title {
  font-size: 2.5em;
  font-weight: bolder;
  line-height: 1.15em;
  text-align: center
}

.centered .titles .explanation {
  font-size: 1.1em;
  text-align: center
}

@media screen and (max-width:550px) {
  .centered .titles {
    padding: 1em
  }

  .centered .titles .title {
    font-size: 1.8em
  }

  .centered .titles .explanation {
    font-size: 1em
  }
}

a {
  text-decoration: none
}

* {
  box-sizing: border-box;
  color: #000
}

body,
html {
  -webkit-font-smoothing: antialiased;
  color: var(--medium);
  font-family: Nunito Sans, sans-serif;
  font-size: 16px;
  font-weight: 400;
  height: -webkit-fill-available;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  margin: 0 0 1em
}

::-webkit-input-placeholder {
  color: #757575
}

::-webkit-scrollbar {
  display: none
}

:focus {
  outline: 0
}

.bold {
  font-weight: 700
}

.ellipsis,
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.tamanhoImgAnimais {
  width: 11rem;
}

.tamanhoImgLogo {
  width: 9rem;
}